<template>
  <div class="detail_box">
    <!-- 操作 -->
        <div class="operate_box">
          <div class="btn_box" v-if="btn&&(btn.addPhoto)">
            <span class="operate_btn search_btn" v-if="btn.addPhoto" @click="openPopup('')">新增</span>
          </div>
        </div>
    <!-- 表格 -->
    <div class="table_box">
      <el-table
        border
        height="440"
        v-loading="loading"
        :header-cell-style="tableHeader"
        :data="tableInfo"
        tooltip-effect="dark"
        style="width: 100%;">
        <el-table-column
          width="80"
          prop="id"
          label="ID">
        </el-table-column>
<!--        <el-table-column-->
<!--          width="160"-->
<!--          sortable-->
<!--          prop="modifyTime"-->
<!--          label="修改时间">-->
<!--          <template slot-scope="scope">-->
<!--            <p style="text-align: left">{{ formatTime(scope.row.modifyTime) }}</p>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          label="排序">
          <template slot-scope="scope">
            <div>
              {{ scope.row.sort }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="图片">
          <template slot-scope="scope">
            <div>
              <img :src="scope.row.photoUrl" class="icon" v-if="scope.row.photoUrl">
              <p v-else>——</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <div :style="'color:'+(scope.row.enable===1?'#67c430':'#e60000')">
              {{ scope.row.enable === 1 ? '可用' : '禁用' }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          fixed="right"
          width="150" v-if="btn&&(btn.updatePhoto || btn.deletePhoto)">
          <template slot-scope="scope">
            <div class="table_btn">
              <span class="change_info" v-if="btn.updatePhoto" @click="openPopup(scope.row.id)">编辑</span>
              <span class="change_info delete_btn" v-if="btn.deletePhoto"
                    @click="deleteItem(scope.row.id,scope.$index)">删除</span>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--    新增-->
    <addImg v-if="isAdd" :productId="productId" :editId="editId" @listenToChild="listenToEdit"></addImg>
  </div>
</template>

<script>
import {listData, delData} from "@/api/config/photo";
import commons from "../../../utils/common";
import addImg from "./addImg";
import {getBtn} from "@/utils/btnAuth";

export default {
  props: ['productId'],
  components: {
    addImg
  },
  data() {
    return {
      isAdd: false,
      editId: '',
      tableInfo: [],
      loading: false,
      btn: {}
    }
  },

  mounted() {
    this.btn = getBtn();
    if (this.btn.queryPhoto) {
      this.getTableInfo();
    }
  },

  methods: {
    getTableInfo() {
      let that = this;
      that.loading = true;
      let queryParams = {
        productId: that.productId,
      }
      listData(queryParams).then(res => {
        that.tableInfo = res ? res.list : [];
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },
    //删除
    deleteItem(id, index) {
      let that = this;
      that.$confirm(`确定删除图片?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delData(id).then((res) => {
          that.tableInfo.splice(index, 1)
          that.$message.success({
            message: '删除成功！',
            duration: 1500
          });
        })
      }).catch(() => {
      });

    },
    openPopup(id) {
      this.editId = id
      this.isAdd = true;
    },

    listenToEdit(e) {
      this.isAdd = false;
      if (e.refresh) {
        this.getTableInfo()
      }
    },

    closeTip(refresh) {
      this.$emit('listenToChild', {refresh: refresh})
    },


    formatTime(time) {
      return commons.formatTime(time);
    },

    // 设置table标题居中
    tableHeader({row, column, rowIndex, columnIndex}) {
      return 'background:#F0F2F5;color:#111;padding:10px 0;font-size:14px;font-weight:600'
    },
  }
}
</script>

<style>
.el-dialog__body {
  padding: 0 20px 20px !important;
}
</style>
<style scoped>
.detail_box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  height: 600px;
  min-height: 600px;
  padding: 0;
}

</style>

